<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="2">
    <caption>商品列表</caption>
    <tr>
        <th>商品标题</th>
        <th>商品价格</th>
        <th>商品销量</th>
    </tr>
</table>
<script>
    //实例化一个空对象
    let p1 = {};
    //动态添加属性和方法(Java不支持)
    p1.name = "张珊";
    p1.age = 20;
    p1.run = function () {
        console.log(this.name + ":" + this.age);
    }
    p1.run();

    //实例化一个包含属性和方法的对象
    let p2 = {
        name: "李四",
        age: 20,
        run: function () {
            console.log(this.name + ":" + this.age);
        }
    }
    p2.run();

    let p = {title: "李宁篮球鞋", price: 500, saleCount: 2000};
    let arr = [{title: "匹克脱鞋", price: 100, saleCount: 1000},
        {title: "耐克袜子", price: 80, saleCount: 2231},
        {title: "李宁篮球鞋", price: 500, saleCount: 2000},
        {title: "乔丹篮球鞋", price: 2000, saleCount: 2023},]
    let t = document.querySelector("table");
    //遍历数组,把数组中商品的信息显示到表格里面
    for (let product of arr) {
        let tr = document.createElement("tr");
        let titleTd = document.createElement("td");
        let priceTd = document.createElement("td");
        let scTd = document.createElement("td");
        titleTd.innerText = product.title;
        priceTd.innerText = product.price;
        scTd.innerText = product.saleCount;
        tr.append(titleTd, priceTd, scTd);
        t.append(tr);
    }
</script>
</body>
</html>